<template>
  <el-dialog :model-value="userDialogVisible" title="用户管理" width="50%" :show-close="false" top="5%">
    <template #header>
      <div
        class="py-[13px] px-[16px] flex items-center justify-between border-b border-solid border-[#E8E8E8]"
      >
        <span class="text-[18px] font-bold">用户管理</span>
        <el-icon @click="closeDialog" class="cursor-pointer">
          <Close />
        </el-icon>
      </div>
    </template>
    <div class="main">
      <search 
        :remove-ids="removeIds"
        @search="handleSearch"
        @add-user="handleAddUser"
        @refresh-table="handleRefreshTable"
      />
      <lz-table 
        ref="tableRef"
        class="lz-table"
        @selection-change="handleSelectionChange"
        @view-info="handleViewInfo"
        @refresh-table="handleRefreshTable"
      />
      <dialog-info 
        ref="dialogInfoRef"
        @refresh-table="handleRefreshTable"
      />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue';
import { Close } from '@element-plus/icons-vue';

const Search = defineAsyncComponent(() => import('./component/search.vue'));
const LzTable = defineAsyncComponent(() => import('./component/LzTable.vue'));
const DialogInfo = defineAsyncComponent(() => import('./component/dialogInfo.vue'));

const emit = defineEmits(['update:userDialogVisible']);
const { userDialogVisible } = defineProps({
  userDialogVisible: {
    type: Boolean,
    default: false
  }
});

// 组件引用
const tableRef = ref();
const dialogInfoRef = ref();

// 状态管理
const removeIds = ref([]);

// 搜索处理
const handleSearch = (keyWorld) => {
  console.log('userDialog/index.vue - 接收到搜索事件:', keyWorld);
  if (tableRef.value) {
    console.log('userDialog/index.vue - 调用 tableRef.handleSearch');
    tableRef.value.handleSearch(keyWorld);
  } else {
    console.log('userDialog/index.vue - tableRef 不存在');
  }
};

// 添加用户
const handleAddUser = (dialogInfo) => {
  if (dialogInfo.action === 'addNewRow') {
    // 触发新增行
    if (tableRef.value) {
      tableRef.value.addNewRow();
    }
  } else {
    // 原有的弹窗逻辑
    if (dialogInfoRef.value) {
      dialogInfoRef.value.openInfoDialog(dialogInfo);
    }
  }
};

// 选择变化
const handleSelectionChange = (ids) => {
  removeIds.value = ids;
};

// 查看/编辑用户信息
const handleViewInfo = (dialogInfo) => {
  if (dialogInfoRef.value) {
    dialogInfoRef.value.openInfoDialog(dialogInfo);
  }
};

// 刷新表格
const handleRefreshTable = () => {
  if (tableRef.value) {
    tableRef.value.getTableData();
  }
  // 清空选择
  removeIds.value = [];
};

// 关闭用户管理弹窗
const closeDialog = () => {
  // 重置状态
  removeIds.value = [];
  emit('update:userDialogVisible', false);
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: linear-gradient(180deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.4) 100%);
  background-size: 100% 100%;
  
  .lz-table {
    flex: 1;
    overflow: hidden;
  }
}

:deep(.el-dialog__body) {
  padding: 0 !important;
}
</style>
